<template>
  <div class="tools_box">
    <div v-if="type_info === '添加'">

      <!-- 头部按钮控件 -->
      <el-button type="success" size="small" @click="add" class="addClick">{{$t('添加')}}</el-button>
      <el-button type="danger" slot="reference" size="small" @click="del_addr" class="delClick">{{$t('删除')}}</el-button>
    </div>

    <!-- 弹窗页面 -->
    <el-dialog :close-on-click-modal='false' v-drag :title="$t(type_info)" :v-if="dialogFormVisible" :visible.sync="dialogFormVisible" width="640px" top="10vh" @close="close">
      <div class="appPageForm">
        <!-- 添加页面 -->
        <AppEdit ref="child_form" v-if="type_info === '添加'" v-bind:type_info="type_info" @childForm="handleChildForm($event)" />

        <!-- 编辑页面 -->
        <AppEdit ref="child_form" v-if="type_info === '编辑'" v-bind:edit_form="form" v-bind:type_info="type_info" v-bind:dialogFormVisible="dialogFormVisible" @childForm="handleChildForm($event)" />
      </div>

      <!-- 弹窗控件 -->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="getChildData" :class="type_info === '添加' ? 'addSubmit' : 'editSubmit'">{{$t('确 定')}}</el-button>
        <el-button @click="close" :class="type_info === '添加' ? 'addClose' : 'editClose'" class="addClose">{{$t('取 消')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AppEdit from './AppEdit'
import { addAppData, editAppData, delAppData } from '@/api/list/app'
export default {
  props: [
    'edit_form',
    'type_info',
    'multipleSelection'
  ],
  name: 'AppTools',
  components: {
    AppEdit
  },
  data () {
    return {
      lang: this.$i18n.locale,
      form: {},
      dialogFormVisible: false,
      visible: false
    }
  },
  watch: {
    edit_form: {
      handler (val) {
        this.form = val
      },
      immediate: true
    }
  },
  methods: {
    edit_info () {
      this.add()
    },
    getChildData () {
      this.$refs.child_form.send_form()
    },
    handleChildForm (data) {
      let formData = {}
      formData = data
      // let url = ''
      if (this.type_info === '添加') {
        // url = 'app_blue/addApp/'
        addAppData(formData).then(response => {
          if (response.status === 0) {
            this.$messages.success(response.msg)
          }
          this.dialogFormVisible = false
          this.form = {}
          this.$emit('listData')
          this.close()
        })
      } else {
        // url = 'app_blue/editApp/'
        editAppData(formData).then(response => {
          if (response.status === 0) {
            this.$messages.success(response.msg)
          }
          this.dialogFormVisible = false
          this.form = {}
          this.$emit('listData')
          this.close()
        })
      }
    },
    del_addr () {
      // this.visible = false
      if (this.multipleSelection.length === 0) {
        this.$messages.error(this.$t('请至少选择一条数据进行删除'))
        return
      }
      let formData = {}
      formData.name_str = ''
      for (let item of this.multipleSelection) {
        formData.name_str += item.name + '@#@'
      }
      this.$confirm(this.$t('您是否要删除所有选中的数据？'), this.$t('提示'), {
        closeOnClickModal: false,
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        confirmButtonClass: 'confirmButton',
        cancelButtonClass: 'confirmCancelButton',
        type: 'warning'
      }).then(() => {
        delAppData(formData).then(response => {
          if (response.status === 0) {
            this.$messages.success(this.$t('删除成功'))
          }
          this.$emit('listData')
        })
      })
    },
    add () {
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['child_form'].classRef()
      })
    },
    close () {
      this.dialogFormVisible = false
      this.$refs.child_form.close()
    }
  }
}
</script>

<style scoped>
.tools_box {
  text-align: left;
}

.appPageForm {
  max-height: calc(90vh - 244px);
  overflow-y: auto;
}
</style>
